<template>
  <div class="choose-time-box">
    <div>
      <template v-if="!chooseDis">
        <span v-for="(item,index) in timeList" :key="index" :class="timeChooseType==item.val? 'active' : '' " @click="chooseTimeType(item)">{{ item.name }}</span>
      </template>
      <template v-else>
        <span v-for="(item,index) in timeList" :key="index" :class="timeChooseType==item.val? 'active' : '' " style="opacity: 0.5;">{{ item.name }}</span>
      </template>

      <el-date-picker
        v-model="value1"
        style="width: 250px;margin-left:-20px;"
        size="small"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        unlink-panels
        :picker-options="pickerOptions"
        :clearable="false"
        @change="pickerChange"
      />
    </div>
  </div>
</template>

<script>
import {
  getToDay,
  getYesDay,
  getTime,
  getAbout7Day,
  getThisWeek,
  getThisWeekToDay,
  getThisMonthToDay,
  getAbout7DayToDay,
  getThisMonth,
  getThisYear,
  getThisYearToDay
} from '@/utils/moment.js'

import Cookies from 'js-cookie'

// import moment from 'moment'

import {
  timeChooseList,
  timeChooseListFinance
} from '@/settings.js'

export default {
  props: {
    cookieSet: {
      default: false,
      type: Boolean
    }

  },
  data() {
    return {
      chooseDis: false,
      timeChooseType: undefined, // 选择时间的类型
      pickerOptions: { // 时间选择器的限制
        disabledDate(time) {
          // 不能选择今天之后的日期；
          return time.getTime() > Date.now()
        }
      },
      value1: [],
      timeList: timeChooseList,
      timer: undefined
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        this.initTime()
      },
      // 深度观察监听
      deep: true,
      immediate: true
    }
  },
  mounted() {
    // if (this.$route.name === 'Finance'){
    //   this.timeList = timeChooseListFinance
    // } else {
    //   this.timeList = timeChooseList
    // }
  },
  methods: {

    initTime() {
      const obj = Cookies.get('Choose-time') ? JSON.parse(Cookies.get('Choose-time')) : undefined
      if (obj) {
        if (obj.timeChooseType) {
          // 要是有时间类型
          this.chooseTimeType({
            val: obj.timeChooseType
          })
        } else {
          // 没有时间类型就设为上次选择的日期
          this.timeChooseType = undefined
          this.hanldeTimeChange(obj)
        }
      } else {
        this.chooseTimeType({
          val: '7day'
        })
      }
    },

    // 点击了昨日，本周，本月等按钮改变了时间
    chooseTimeType(item) {
      this.chooseDis = true
      if (this.$route.name === 'typeOverview') {
        this.timer = setTimeout(() => {
          this.chooseDis = false
          clearTimeout(this.timer)
        }, 2000)
      } else  {
        this.timer = setTimeout(() => {
          this.chooseDis = false
          clearTimeout(this.timer)
        }, 500)
      }
      const val = item.val
      this.timeChooseType = item.val
      var timeObj = ''
      switch (val) {
        case 'today':
          timeObj = getToDay()
          break
        case 'yestoday':
          timeObj = getYesDay()
          break
        case 'week':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getThisWeekToDay() : getThisWeek()
          break
        case '7day':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getAbout7DayToDay() : getAbout7Day()
          break
        case 'month':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getThisMonthToDay() : getThisMonth()
          break
        case 'year':
          timeObj = this.$route.name === 'personal' || this.$route.name === 'user_manager' || this.$route.name ===
              'Finance' ? getThisYearToDay() : getThisYear()
          break
      }
      this.hanldeTimeChange(timeObj)
    },

    // 时间选择器改变了时间
    pickerChange(data) {
      this.timeChooseType = undefined
      const timeObj = {
        startTime: data[0],
        endTime: data[1]
      }
      this.hanldeTimeChange(timeObj)
    },
    hanldeTimeChange(data) {
      const arr = []
      arr[0] = new Date(data.startTime)
      arr[1] = new Date(data.endTime)
      this.value1 = arr

      this.$emit('timeChange', [getTime({
        time: arr[0]
      }), getTime({
        time: arr[1]
      })])
      // 记忆选择好的时间，下次登录||跳转到下级页面的时候可以用
      if (this.$route.name === 'typeOverview' && this.cookieSet) {
        // 如果是页面是数据概览页面就把用户选择的时间存储起来;
        let storeTimeObj = {}
        if (this.timeChooseType) {
          // 如果是选择了时间组 就把类型存进去
          storeTimeObj = { ...data,
            timeChooseType: this.timeChooseType
          }
        } else {
          // 如果是选择没有选择时间组，就只把时间存进去;
          storeTimeObj = { ...data
          }
        }
        // Cookies.set('Choose-time', storeTimeObj)
        // this.$store.commit('overview/SET_TYPE_TIME', storeTimeObj)
      }
    }

  }
}
</script>

<style lang="scss" scoped="true">
  .choose-time-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    >div {
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-right: 24px;
        cursor: pointer;

        &.active {
          color: #24BEBE;
        }

        &:last-of-type {
          margin-right: 42px;
        }
      }

    }
  }
</style>
